<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Quotes</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">Quotes</h2>
                <button class="btn btn-info" id="request-quote">Request Quote</button>
                <div class="quotes"></div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("#request-quote").click((event) => {
        fetch("/quotes/request", {
                method: "POST"
            })
            .then(res => res.text())
            .then(qid => {
                var row = $(`<h4 class='col-md-12' id='${qid}'>Quote # <i>${qid}</i> | <strong>Pending</strong></h4>`);
                $(".quotes").append(row);
            });
    });
    var source = new EventSource("/quotes");
    source.onmessage = (event) => {
        var json = JSON.parse(event.data);
        $(`#${json.id}`).html(function(index, html) {
            return html.replace("Pending", `\$\xA0${json.price}`);
        });
    };
</script>

</html>